<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="initial-scale=0.9, maximum-scale=1, minimum-scale=0.9, user-scalable=no">
    <script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script type="text/javascript">
        var sid = "<#sid>";
    </script>
</head>

<body class="pmm">
    <div id="vueApp" class="w-container">
        <template>
            <div>
                <!-- 悬浮框模板 -->

                <!-- 表格 -->
                <el-table :data="companyNotice" style="width: 100%">
                    <el-table-column v-for="column in tableColumns" :key="column.prop" :label="column.label">
                        <template slot="header" slot-scope="scoped">
                            <span class="column-header">{{ column.label }}</span>
                            <el-popover placement="bottom" trigger="click" @click.native.stop>
                                <div style="padding: 30px">
                                    <el-radio-group v-model="column.sortType" style="display: flex; flex-direction: column">
                                        <el-radio label="'asc'">按A→Z排序</el-radio>
                                        <el-radio style="margin-top: 10px" label="'desc'">按Z→A排序 </el-radio>
                                    </el-radio-group>

                                    <el-input v-model="column.filterKeyword" placeholder="请输入筛选关键词"
                                              suffix-icon="el-icon-search"></el-input>
                                    <div style="text-align: right; margin-top: 10px">
                                        <el-button type="primary" size="medium"
                                                   @click="applyColumnChanges(column)">确定</el-button>
                                    </div>
                                </div>
                                <i slot="reference" class="el-icon-caret-bottom"></i>
                            </el-popover>
                        </template>
                        <template slot-scope="scope">
                            {{ scope.row[column.prop] }}
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="bottom">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="pagination.currentPage" :page-sizes="[10, 20, 50]" :page-size="pagination.pageSize"
                                   layout="total, sizes, prev, pager, next, jumper" :total="companyNotice.length">
                    </el-pagination>
                </div>
            </div>
        </template>
    </div>

    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script src="../apps/com.awspaas.user.apps.forehope.portal/js/list.js"></script>
    <style lang="scss" scoped>
        .column-header {
            font-family: "PingFang SC";
            font-weight: bold;
            font-size: 18px;
            color: #333333;
        }

        /* 可以添加一些自定义的样式 */
        .el-popover {
            background: #ffffff;
            box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        .el-radio__label {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #666666;
        }

        .custom-radio {
            display: flex;
            align-items: center;
            /* 垂直居中 */
        }

        .custom-radio .el-radio__inner {
            order: 1;
            /* 调整选中框位置 */
            margin-left: 8px;
            /* 增加一些间距 */
        }

        .custom-radio .el-radio__label {
            order: 2;
            /* 调整文本位置 */
        }

        .bottom {
            margin-top: 40px;
        }
    </style>

</body>

</html>